<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>centre de formation de greta</title>
<link href='http://fonts.googleapis.com/css?family=Wellfleet'
    rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=true">
    
</script>

</head>
<body>
    <div id="wrapper">
        <div id="header">
            <jsp:include page="header.jsp" />
        </div>
        <div id="content">
            <h1 class="un-grand-titre">Voici la liste des candidats et leurs
                adresses</h1>
            <br> <br>

            <table border="1" cellpadding="3" cellspacing="0">
                <tr>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>Télephone</th>
                    <th>Code postal</th>
                    <th>Ville</th>
                    <th>Adresse</th>
                </tr>
                <c:forEach var="candidat" items="${candidats}">
                    <tr>
                        <td>${candidat.nom}</td>
                        <td>${candidat.prenom}</td>
                        <td>${candidat.tel}</td>
                        <td>${candidat.cp}</td>
                        <td>${candidat.ville}</td>
                        <td>${candidat.adresse}</td>

                    </tr>
                </c:forEach>
            </table>


        </div>

        <div id="google_map"></div>
        <script>
            /** Les candidats */
            var candidats = new Array();
            <c:forEach var= "candidat" items="${candidats}">
            candidats
                    .push({
                        nom : "${candidat.nom}",
                        prenom : "${candidat.prenom}",
                        adresse : "${candidat.adresse} ${candidat.cp} ${candidat.ville}"
                    });
            </c:forEach>
            alert(candidats.length);

            /* Déclaration des variables  */
            var geocoder;
            var map;
            var markers = new Array();
            var i = 0;

            /* Initialisation de la carte  */
            window.addEventListener("load", function initialize() {
                /* Instanciation du geocoder  */
                geocoder = new google.maps.Geocoder();
                var paris = new google.maps.LatLng(48.8566667, 2.3509871);
                var myOptions = {
                    zoom : 4,
                    center : paris,
                    mapTypeId : google.maps.MapTypeId.HYBRID
                }
                /* Chargement de la carte  */
                map = new google.maps.Map(
                        document.getElementById("google_map"), myOptions);
            });

            /* Fonction de géocodage */
            window
                    .addEventListener(
                            "load",
                            function codeAddress() {
                                /* Appel au service de geocodage avec l'adresse en paramètre */
                                geocoder
                                        .geocode(
                                                {
                                                    'address' : candidats[0].adresse
                                                },
                                                function(results, status) {
                                                    /* Si l'adresse a pu être géolocalisée */
                                                    if (status == google.maps.GeocoderStatus.OK) {
                                                        /* Récupération de sa latitude et de sa longitude */
                                                        map
                                                                .setCenter(results[0].geometry.location);
                                                        /* Affichage du marker */
                                                        var marker = new google.maps.Marker(
                                                                {
                                                                    map : map,
                                                                    position : results[0].geometry.location
                                                                });
                                                        /* Permet de supprimer le marker précédemment affiché */
                                                        //              markers.push(marker);
                                                        //              if(markers.length > 1)
                                                        //               markers[(i-1)].setMap(null);
                                                        //               i++;
                                                    } else {
                                                        alert("Le geocodage n\'a pu etre effectue pour la raison suivante: "
                                                                + status);
                                                    }
                                                });
                            });
        </script>
        <div id="separateur"></div>
        <div id="footer">
            <jsp:include page="footer.jsp" />
        </div>